<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" /> 
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

<title>绑定账户</title>
<style>
 body{
  background: #65cea7 url("image/login-bg.jpg") no-repeat fixed;
 }
 .form-sigin{
    max-width:330px;
    margin:100px auto;
    background:#fff;
    border-radius:5px;
 }
 .form-sigin-heading{
  padding:25px 15px;
  position:relative;
 }
 .form-sigin-heading .sign-title{
  position:absolute;
  top:-60px;
  left:0px;
  width:100%;
  color:#fff;
  text-transform:uppercase;
  font-size:24px;
  
 }
 
 .login-wrap{
  padding:20px;
  position:relative;
  
 }
 .login-wrap p{
  text-align:left;
  font-size:16px;
  color:#b6b6b6;
  }
  .login-wrap input[type="tel"],.login-wrap input[type="submit"], .login-wrap input[type="password"], .login-wrap input[type="text"]{
   width:90%;
   margin-bottom:0px;
   background:#eaeaec;
   border-radius:5px;
   padding:10px 5px;
   border:1px solid #ccc;
  }
  ul li{
   list-style:none;
   float:left;
   width:50%;
   text-align:center;
   
  }
  ul li a{
   text-decoration:none;
   color:#000;
  }
 
  label{
   display:inline-block;
   float:left;
   width:50%;
   
  }

  .btn-sigin{
   background:#6bc5a4;
   font-size:30px;
   color:#fff;
   width:94%;
  padding:10px 5px;
  }
  .registration{
   color:#c7c7c7;
   text-align:center;
   margin-top:15px;
  }
  .registration a{
  color:  #6bc5a4;
  }
    .content ul{
   list-style:none;
   margin:0px;
  }
  .content li{
    float:left;
    display:inline-flex;
    width:50%;
  }
   .content li a,a:hover,a:active,a:visited{
    text-decoration:none;
  }


  .content span{
   color:red;
  }

  #attach1,#attach2{
   font-size:10px;
   height:20px;
   padding:0px;
   margin-top:0px;
   color:red;
   margin-left:5px;
   }
   #attach2{
   clear:both;
  }
  
  .header{
   height:40px;
   
  }

</style>
</head>
<body>
<div class="login-body">
 <div class="container">
  <form class="form-sigin" action="<%=request.getContextPath() %>/login?method=urllogin&openid=<%=request.getAttribute("openid").toString()%>" name="form1" method="post">
   <div class="form-sigin-heading text-center">
    <h1 class="sign-title">login</h1>
    <img src="image/login-logo.png">
   </div>
   <div class="login-wrap">
    <div class="content">
     <div class="way1" style="display:block">
	     <div><span>*</span><input type="tel" placeholder="手机号"  name="phone1"  class="form-control"></div>
		 <div id="attach1" style="font-size:12px" ></div>
		 <div>
		  <ul>
		  <li><span style="line-height:40px">*</span><input type="text" placeholder="手机验证码"  name="checkcode"  class="form-control">
		  </li>
		  <li>
	         <input type="submit" name="btn" class="form-control" onclick="return dosubmit()" value="获取手机验证码">
		  </li>
		  </ul>
         </div>
         <div id="attach2" style="font-size:12px" ></div>
         <div><button type="submit" onclick="return check2()" style="margin-left:5px" class="btn btn-lg btn-sigin"><i class="icon-ok"></i>绑定</button></div>
     </div>
   </div>
  </div>
  </form>
 </div>
</div>
<script src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/Barrett.js"></script>
<script type="text/javascript" src="js/BigInt.js"></script>
<script type="text/javascript" src="js/RSA.js"></script>
<script type="text/javascript" src="js/jQuery.md5.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script>

 $("input[name='phone1']").blur(function(){
	 if(form1.phone1.value==""){
		 $("#attach1").append("该项不能为空");
		 return;
	 }
	 if(form1.phone1.value.length!=11){
		 $("#attach1").append("请检查用户名格式");
		 return;
	 }

   });
  $("input[name='phone1']").focus(function(){
	 $('#attach1').empty(); 
	 $("#attach2").empty(); 
  });

 
  $("input[name='checkcode']").blur(function(){
	  if(form1.checkcode.value==""){
		  $("#attach2").append("此项不能为空");
		  return;
	  }

  });
  
   $("input[name='checkcode']").focus(function(){
	     $("#attach1").empty(); 
		 $("#attach2").empty(); 
   });
   
   $("document").ready(function(){
		/*防刷新，检测是否存在cookie*/
		if($.cookie("captcha")){
			var count=$.cookie("captcha");
			var btn=$("input[name='btn']");
			btn.val(count+'秒后可重新获取').attr('disabled',true).css("cursor","not-allowed");
			var resend=setInterval(function(){
				count--;
				if(count>0){
					btn.val(count+'秒后可重新获取').attr('disabled',true).css("cursor","not-allowed");
				    $.cookie("captcha",count,{path:'/',expires:(1/86400)*count});
				}else{
					clearInterval(resend);
					btn.val("获取验证码").removeClass("disabled").removeAttr("disabled style");
				}
			}, 1000);
			
		}
  });

  function dosubmit(){
	   /*检查pnone是否为空*/
	   if(form1.phone1.value==""){
		   $("#attach1").empty();
		   $("#attach1").append("该项不能为空");
		   return false;
	   }
		 if(form1.phone1.value.length!=11){
			 $("#attach1").empty();
			 $("#attach1").append("请检查用户名格式");
			 return false;
		 }

	  //发送验证码
	   var btn=$("input[name='btn']");
	   var count=60;
	   /*请求发送手机验证码*/
	   $.ajax({
		  url:"<%=request.getContextPath()%>/login?method=sendcode",
		  type:"get",
		  dataType:"json",
		  data:{mobile:$("input[name='phone1']").val()},
		  success:function(){
			  
		  }
	   });
	   
	   var resend=setInterval(function(){
		   count--;
		   if(count>0){
			   btn.val(count+"秒后可重新获取");
			   $.cookie("captcha",count,{path:'/',expires:(1/86400)*count});
	   
		   }else{
			   clearInterval(resend);
			   btn.val("获取密码").removeAttr("disabled style");
			   
		   }
	   }, 1000);
	   btn.attr("diabled",true).css("cursor","not-allowed");
       return false;
  }
  

  function check2(){
	  var result=false;
	   if(form1.phone1.value==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach1").append("该项不能为空");
		   return result;
	   }
	   if(form1.checkcode.value==""){
		   $("#attach1").empty();
		   $("#attach2").empty();
		   $("#attach2").append("该项不能为空");
		   return result;
	   }
	   $.ajax({
			  url:"<%=request.getContextPath()%>/login?method=checkcode",
			  async: false,
			  type:"get",
			  dataType:"json",
			  data:{code:$("input[name='checkcode']").val()},
			  success:function(data){
				 if(data.ok==1){
					 result=true;
				 }else{
					 $("#attach2").empty();
					 $("#attach2").append(data.msg);
					 result=false;
				 }
			  }
		   });
	   return result;

  }

</script>
</body>
</html>